<template>
    <customNavigationBar title="我的团队" />
    <view class="page">
        <view class="group">
            <view class="title">我加入的团队</view>

            <view class="items">
                <view class="item" v-for="(item, index) in joinTeam" :key="item.id">
                    <view class="avatar">
                        <image :src="item.avatar" mode="aspectFill"></image>
                    </view>

                    <view class="infomation">
                        <view class="info">
                            <span>{{ item.nickName }}</span>
                            <span v-if="index === 0">团队负责人</span>
                            <span>{{ item.grade == 2 ? '金牌' : '' }}{{ userRoleType[userRole] }}</span>
                        </view>

                        <view class="tel">电话：{{ item.phone }}</view>

                        <view class="address">{{ `${item.province}${item.city}${item.district}${item.street}${item.community}${item.address}` }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="group" v-if="nowGroupNum >= 1">
            <view class="title">我的团队</view>

            <view class="items">
                <view class="item" v-for="(item, index) in ownTeam" :key="item.id">
                    <view class="avatar">
                        <image :src="item.avatar" mode="aspectFill"></image>
                    </view>

                    <view class="infomation">
                        <view class="info">
                            <span>{{ item.nickName }}</span>
                            <span v-if="index === 0">团队负责人</span>
                            <span>{{ userRoleType[userRole] }}</span>
                        </view>

                        <view class="tel">电话：{{ item.phone }}</view>

                        <view class="address">{{ `${item.province}${item.city}${item.district}${item.street}${item.community}${item.address}` }}</view>
                    </view>
                </view>

                <view class="target" v-if="nowGroupNum >= 1">
                    <view class="lineBox">
                        <view class="num" :class="nowGroupNum >= 1 && 'active'">1</view>

                        <view class="line" :style="{ width: `calc(((100% - 88rpx)  / ${allGroupNum} ) * ${nowGroupNum - 1} )` }" v-if="nowGroupNum > 1"></view>

                        <view class="num active" v-if="nowGroupNum !== 1 && nowGroupNum !== allGroupNum">
                            {{ nowGroupNum }}
                        </view>

                        <view class="line gray" v-if="nowGroupNum != allGroupNum"></view>

                        <view class="num" :class="nowGroupNum == allGroupNum && 'active'">{{ allGroupNum }}</view>
                    </view>

                    <view class="text" v-if="nowGroupNum > 0 && nowGroupNum < allGroupNum">差{{ allGroupNum - nowGroupNum }}位，成为金牌{{ userRoleType[userRole] }}</view>
                    <view class="text" v-else-if="nowGroupNum == allGroupNum">您已成为成为金牌{{ userRoleType[userRole] }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';

const userRole = ref(0); //0推广 1管家   2 运营中心
const userRoleType = ['悦居推客', '悦居管家', '运营中心'];
onLoad(() => {
    getData();
    getGroupNum();
    userRole.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
});

const joinTeam = ref([]);
const ownTeam = ref([]);
const getData = async () => {
    let [r1, r2] = await Promise.allSettled([
        homeApis.getMyJoinTeam({
            current: 1,
            size: 20
        }),
        homeApis.getOwnTeam({
            current: 1,
            size: 20
        })
    ]);

    joinTeam.value = r1.value.data.records;
    ownTeam.value = r2.value.data.records;
};

// 获取团队人数  管家 运营中心
const allGroupNum = ref(0);
const nowGroupNum = ref(0);
const getGroupNum = async () => {
    let res = await homeApis.getTeamNum();
    allGroupNum.value = res.data.globBaseNum;
    nowGroupNum.value = res.data.teamNum;
};
</script>
<style lang="scss">
page {
    background-color: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.page {
    padding: 20rpx 24rpx;
}

.title {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 20rpx;
}

.items {
    margin-bottom: 24rpx;
    width: 100%;
    padding: 0 32rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .item {
        padding: 32rpx 0 0;
        display: flex;
        gap: 24rpx;

        .avatar {
            width: 116rpx;
            height: 116rpx;
            background: #e4e4e6;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 116rpx;
                height: 116rpx;
            }
        }

        .infomation {
            padding-bottom: 32rpx;
            border-bottom: 2rpx solid #e4e4e6;
            flex: 1;
            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
            .tel {
                margin: 10rpx 0;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
            .address {
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
                line-height: 36rpx;
            }
        }

        &:last-child .infomation {
            border-bottom: none;
        }
    }

    .target {
        padding: 32rpx;
        .lineBox {
            padding: 0 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rpx;

            .num {
                width: 40rpx;
                height: 40rpx;
                font-size: 22rpx;
                line-height: 36rpx;
                text-align: center;
                border-radius: 50%;
                border: 2rpx solid #333333;
                background: transparent;
                color: #333333;

                &.active {
                    background: #2c72ff;
                    border: 2rpx solid #2c72ff;
                    color: #ffffff;
                }
            }

            .line {
                height: 2rpx;
                background: #2c72ff;
                &.gray {
                    flex: 1;
                    background: #333333;
                }
            }
        }
        .text {
            font-size: 22rpx;
            color: #000000;
            margin-top: 20rpx;
            text-align: center;
        }
    }
}
</style>
